<script setup lang= 'ts'>
import { searchHotApi } from '@/services'
import type { HotSearchResponse, HotSearch } from '@/services/type'
import { ref } from 'vue'

const hotList = ref<HotSearch[]>([])


// 获取热搜列表
const getHotList = async () => {
  try {
    const res = await searchHotApi()
    hotList.value = res.data
    console.log(res.data)
  } catch (error) {
    uni.showToast({
      title: '获取热搜失败',
      icon: 'none',
      duration: 3000//,报错提示，显示时间
    })
  }
}
getHotList()


interface Emits {
  change: [val: string]
  del:[]
  delone:[val: string]
  onInput:[val: string] //点击搜索历史跳搜索建议
}
interface Props {
  historylist: string[]
}

const props = defineProps<Props>()
const emits = defineEmits<Emits>()


</script>

<template>
  <uni-section title="搜索历史" type="line">
    <view class="history-list-wrap">
      <view class="history-list" v-for="(item, index) in historylist" :key="index">
        <text
          @click="emits('onInput', item)"
          class="history-item"
          >
        {{ item }}
        </text>
        <text @click="emits('delone', item)" class="history-del">&times;</text>
      </view>
    </view>    
    <view @click="emits('del')" v-if="props.historylist.length > 0" class="history-clear">清空</view>
  </uni-section>
  <uni-section title="热门搜索" type="line" />
  <view class="hot-list">
    <view
      v-for="(item, index) in hotList"
      :key="item.searchWord"
      class="hot-item"
      @click="emits('change', item.searchWord)"
      >
      <text class="hot-index">{{ index + 1 }}</text>
      <text class="hot-word">{{ item.searchWord }}</text>
      <image :src="item.iconUrl" class="hot-icon" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.history-list-wrap {
  display: flex;
  flex-wrap: wrap;
}
.history-list {
  position: relative;
  margin: 8px;
  .history-item {
    font-size: 14px;
    color: #333;
    margin: 8px;
    background-color: #eee;
    border-radius: 10%;
    padding: 2px 10px;
  }
  .history-del {
    width: 20px;
    height: 20px;
    line-height: 20px;
    // background-color: red;
    position: absolute;
    right: -4px;
    top: -13px;
    font-size: 18px;
    color: #666;
    text-align: center;
  }
}
.history-clear {
  font-size: 14px;
  position: absolute;
  right: 20rpx;
  top: 138rpx;
}
.hot-list{
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  .hot-item {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    &:nth-child(1) {
      .hot-index {
          color: #e00c92;
      }
    }
    &:nth-child(2) {
      .hot-index {
          color: #d4196a;
      }
    }
    &:nth-child(3) {
      .hot-index {
          color: #ff5722;
      }
    }
    .hot-index {
      font-size: 13px;
      font-weight: 900;
      color: black;
      width: 30px;
    }
   .hot-word {
      font-size: 16px;
      color: black;
    }
    .hot-icon {
      width: 16px;
      height: 16px;
      margin-left: 10px;
    }
  }
}

.uni-section ::v-deep  .uni-section-header__decoration{
  background-color: rgb(236, 117, 117);
}
</style>
